<template>
  <div class="pagss">

    <div style="height: 20px;"></div>
    <Navvz></Navvz>

    <div class="panel-group1">

      <div class="space-between">
        <div class="row_a_c">
          <div class="f_18 mr_60 cursor " :class="{'actact':course_class_id==1}" @click="getCourseClass(1)">服务端</div>
          <div class="f_18 mr_60 cursor" :class="{'actact':course_class_id==2}" @click="getCourseClass(2)">客户端</div>
          <div class="f_18 mr_60 cursor" :class="{'actact':course_class_id==3}" @click="getCourseClass(3)">版本开发</div>
        </div>

        <div class="center">
          <!--   <el-input class="search" style="width: 160px;" v-model="keyword" placeholder="搜索" prefix-icon="el-icon-search"
            @keyup.enter="handleSearch"></el-input> -->

          <el-select :loading="loading" v-model="selectedItem" multiple filterable remote reserve-keyword
            @change="handleCh" :remote-method="searchItems" placeholder="请输入">
            <el-option v-for="item in searchResults" :key="item.id" :value="item.id" :label="item.title"></el-option>
          </el-select>


        </div>
      </div>

      <el-divider></el-divider>

      <div class="row_a_c">
        <div @click="courseTwo(itemc,indexc)" class="row_a_c   cursor" v-for="(itemc, indexc) in CourseClassList"
          :key="indexc">
          <div class="f_18 mr_10 center" :class="{'act':selectedClassIndex==indexc}">{{itemc.class_name}}</div>
        </div>
      </div>


      <div class="mt_30  itemBox_jp" style="width: 100%;margin-bottom: 30px; " v-if="CourseList">

        <div class="item" @click="toUrlr('/center/videoCourseDetails',item.id)" v-for="(item, index) in CourseList"
          :key="index">
          <img class="cqaimg" :src="item.picture" />
          <div class="f_18 leftts">{{item.title}}</div>
          <div class="row_a_c leftts">
            <i class="el-icon-view"></i>
            <div class="f_16 mt_5 color_B2B2B2 ml_5">{{item.play_num}}w</div>
          </div>
        </div>

      </div>

    </div>


  </div>
</template>

<script>
  import Navvz from "@/components/Navvz";
  import Sidebartss from "@/components/Sidebartss";
  import * as Course from "@/api/system/course";
  export default {
    name: 'VideoCourse',
    components: {
      Navvz,
      Sidebartss,
    },
    data() {
      return {
        searchResults: [],
        loading: false,
        selectedItem: '',
        CourseList: [],
        keyword: '',
        searchResults: [],
        course_class_id: 1, //  1服务端 2客户端 3版本开发 一级分类
        class_id_tow: 0, //二级分类id
        CourseClassList: [], //二级分类列表
        selectedClassIndex: '',
      }
    },
    created() {
      this.getCourseClass(); //课程二级分类
    },
    beforeDestroy() {},
    mounted() {},
    methods: {
      /**点击一级分类--- 查询课程分类(二级) */
      getCourseClass(course_class_id = 1) {
        this.new_how = 2;
        this.course_class_id = course_class_id;
        this.loading = true;
        var per = {
          class_id: this.course_class_id,
        };
        Course.getCourseClass(per).then((response) => {
          this.CourseClassList = response.data.rows;
          this.selectedClassIndex = 0
          this.class_id_tow = this.CourseClassList[0].id
          this.getCourseList();
          this.loading = false;
        });
      },

      /** 查询课程列表 */
      getCourseList() {
        this.loading = true;
        var per = {
          class_id_tow: this.class_id_tow,

        };
        Course.List(per).then((response) => {
          this.CourseList = response.data.rows;
          this.loading = false;
        });
      },

      //课程切换
      courseTwo(itemc, indexc) {
        console.log('itemc', itemc)
        this.selectedClassIndex = indexc
        this.class_id_tow = itemc.id
        this.getCourseList();
      },
      toUrlr(url, id) {
        this.$router.replace({
          path: url,
          query: {
            id: id,
          }
        })
      },

      searchItems(query) {
        console.log('query', query)
        if (query) {
          var per = {
            title: query,
          };
          this.loading = true;
          Course.List(per).then((response) => {
            this.searchResults = response.data.rows;
            this.loading = false;
          });
        }
      },

      handleCh(value) {
        console.log('value', value[0])
        this.toUrlr('/center/videoCourseDetails', value[0])
      },
      handleSearch() {
        // 发送搜索请求，并更新搜索结果
        // 这里仅为示例，实际的搜索逻辑需要根据具体情况自行编写
        // 可以在这里使用异步请求或者本地过滤的方式进行搜索
        // 更新搜索结果
        this.searchResults = this.dataList.filter(item => item.name.includes(this.keyword));
      }
    }
  }
</script>

<style lang="scss" scoped>
  .pagss {
    height: 100%;
    background: #E4EEF9;
    // padding: 5px 0 15px 40px;
  }

  .panel-group1 {
    padding: 25px;
    margin-top: 18px;
    margin-bottom: 0px;
    margin-right: 15px;
    margin-left: 15px;
    min-height: 760px;
    background: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
  }

  .actact {
    color: #FFFFFF !important;
    font-size: 23px;
    font-weight: bold;
    background-color: #3FC1C9;
    padding: 5px 20px 5px 20px;
  }


  .act {
    border-radius: 10px;
    padding: 10px;
    min-width: 100px;
    height: 40px;
    background: #3FC1C9;
    box-shadow: 0px 3px 8px 0px rgba(46, 120, 255, 0.55);
    color: #FFFFFF !important;
  }


  .cqaimg {
    width: 100%;
    height: 200px;
  }

  .itemBox_jp {
    display: flex;
    flex-wrap: wrap;
  }

  .item {
    width: 23%;
    margin-right: 20px;
    /* 每行排列4个，每个占据25%宽度 */
    text-align: left;
    margin-bottom: 20px;
  }

  .item:first-child:nth-last-child(4n + 1),
  .item:first-child:nth-last-child(4n + 2),
  .item:first-child:nth-last-child(4n + 3) {
    width: calc(25% - 40px);
    /* 首行左对齐时，每行元素缩小一些 */
  }

  .item:last-child:nth-child(4n + 1),
  .item:last-child:nth-child(4n + 2),
  .item:last-child:nth-child(4n + 3) {
    margin-bottom: 0;
    /* 最后一行去掉底部边距 */
  }

  ::v-deep .el-input__inner::placeholder {

    color: #FFFFFF;
  }

  ::v-deep .el-input--medium .el-input__inner {

    background: #3FC1C9;
    color: #FFFFFF;
  }

  ::v-deep .el-icon-search:before {
    color: #FFFFFF;
  }
</style>